<template>
     <div>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="_code" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="type" label="活动类型" width="120">
            <template slot-scope="scope">
                <span>{{ scope.row.type | activityTypeTxt }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="活动标题" width="120">
        </el-table-column>
        <el-table-column prop="address" label="活动地点" width="120">
        </el-table-column>
        <el-table-column prop="time" label="活动时间" width="300">
            <template slot-scope="scope">
                {{ scope.row.begin_time }}~{{ scope.row.end_time }}
          </template>
        </el-table-column>
        <el-table-column prop="sing_end_time" label="报名截止时间" width="120">
        </el-table-column>
        <el-table-column prop="point_num" label="活动积分" width="120">
            <template slot-scope="scope">
            <div style="color: #1890ff">
              系统积分{{ scope.row.point_num }}/人
            </div>
            <div style="color: #1890ff">
              荣誉积分{{ scope.row.honor_point_num }}/人
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="person_num_limit" label="活动人数上线" width="120">
        </el-table-column>
        <el-table-column prop="report_num" label="已报名人数" width="120">
        </el-table-column>
        <el-table-column prop="sign_num" label="已签到人数" width="120">
        </el-table-column>
        <el-table-column prop="status" label="上架状态" width="120">
            <template slot-scope="scope">
                <span>{{ scope.row.status ==1 ?'上架':'下架' }}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
                <el-button @click="showClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>


    <addActivity
      v-if="addActivityShow"
      @handleClose="addActivityShow = false"
      :dialogVisible="addActivityShow"
      :add_Or_edit="add_Or_edit"
    ></addActivity>

    <activeDetail
    v-if="activeDetailShow"
      @handleClose="activeDetailShow = false"
      :dialogVisible="activeDetailShow"
      :id="actId"
    ></activeDetail>

</div>
</template>

<script>
import addActivity from './common/addActivity.vue';
import activeDetail from './common/activeDetail.vue';
import {activeList} from "@/api/activity.js";

export default {
    filters: {
        activityTypeTxt(type) {
        let txt = "";
        switch (type) {
            case 1:
            txt = "邻里活动";
            break;
            case 2:
            txt = "达人活动";
            break;
            case 3:
            txt = "社团活动";
            break;
            case 4:
            txt = "志愿活动";
            break;
            case 5:
            txt = "党建活动";
            break;
        }
        return txt;
        },
    },
    data() {
        return {
            tableData: [],
            total:0,
            add_Or_edit: "add",
            addActivityShow:false,
            activeDetailShow:false,
            actId: "",
        }
    },

    components: {addActivity,activeDetail},

    mounted() {
       this.getList();
    },
    methods: {
        getList(){
            activeList(this.form).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                }
            });
        },

        showClick(e) {
            this.actId=e.id;
            this.activeDetailShow=true;
        },

        editClick(e) {
            this.actId=e.id;
            this.addActivityShow=true;
        }
    }
}
</script>